<template>
	<view class="">
		<view class="item bgw">
			<view class="flex">
				<template v-for="col in table">
					<!-- <view class="col-item" :style="col.style" v-if="col.key == '_qty'">
						<input v-model="value" type="number" placeholder="请输入" @blur="value_blur" @input="value_input" :maxlength="6" class="input_border_bottom"/>
					</view> -->
					<view class="col-item" :style="[col.style]" v-if="col.key == 'status'">
						<picker @change="bind_picker_change" :value="picker_index" :range="picker_array" range-key="label">
								<view class="flex input_border_bottom">
									<view class="flex-1">
										{{picker_obj[detail.status]}}
									</view>
									<view class="ml5">
										<u-icon name="arrow-down" color="#999999" size="14"></u-icon>
									</view>
								</view>				
						</picker>
					</view>
					<view class="col-item" :style="[col.style]" v-else-if="col.key == 'stock_out_per_taking_cost_day'">
						<picker @change="bind_picker_day_change" :value="picker_day_index" :range="days" range-key="label">
								<view class="flex input_border_bottom">
									<view class="flex-1">
										{{days[picker_day_index].text}}
									</view>
									<view class="ml5">
										<u-icon name="arrow-down" color="#999999" size="14"></u-icon>
									</view>
								</view>				
						</picker>
					</view>
					<view class="col-item" :style="[col.style]" v-else-if="col.key == 'main_qty'">
						<input v-model="detail.main_qty" type="number" placeholder="请输入" :maxlength="8"
							class="input_border_bottom" @input="value_input" @blur="value_blur"
							data-name="main_qty" />
					</view>
					
					<view class="col-item" :style="[col.style]"  v-else-if="col.key == 'profit'">
						{{profit}}
					</view>
					<!-- <view class="col-item" :style="[col.style]" v-else-if="col.key == 'stock_qty_before_taking'">
						<input v-model="detail.stock_qty_before_taking" type="number" placeholder="请输入" :maxlength="8"
							class="input_border_bottom" @input="value_input" @blur="value_blur"
							data-name="stock_qty_before_taking" />
					</view> -->
					<!-- <view class="col-item" :style="[col.style]" v-else-if="col.key == 'action'">
						<view class="flex" style="justify-content: center;" @click="del">
							<u-icon name="trash" color="#999999" size="16"></u-icon>
						</view>
					</view> -->
					<view class="col-item" :style="[col.style]" v-else>
						{{detail[col.key]}}
					</view>
				</template>
			</view>
		</view>
		<view class="blank20"></view>
	</view>
</template>

<script>
	const formatPrice = (price) => {
		price = '' + price;
		price = price
			.replace(/\s*/g, "") //去除字符串内所有的空格
			.replace(/[^\-\d.]/g, '') // 清除“-”“数字”和“.”以外的字符
			.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
			.replace('.', '$#$')
			.replace(/\./g, '')
			.replace('$#$', '.')
			.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 只能输入两个小数
		// if (price.indexOf('.') < 0 && price != '') {
		//     // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
		//     price = parseFloat(price);
		// }
		// if (price[0] == '0' && price != '') {
		//     // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
		//     price = parseFloat(price);
		// }
		if (price != '') {
			price = Number(price);
		}
		return price;
	};
	import {
		one_day_kpi_report_detail,
		save_one_day_sales_cost_detail,
		update_cost_report_data,
		common_write,
		common_create,
		common_delete
	} from '@/common/api.js';
	export default {
		name: "item",
		props: {
			detail: Object,
			table:Array,
			days:Array
		},
		data() {
			return {
				picker_index:0,
				picker_array:[],
				picker_obj:{
					't2_stock_out':'出库',
					't3_stock_in':'入库',
					't1_pending':'无',
				},
				picker_day_index:0,
				// value: 1,
				loading: false,
				
			};
		},
		watch: {
			detail: {
				handler(newVal, oldVal) {
					if (newVal.id != oldVal.id) {
						this.init();
					}
				},
				immediate: false,
				deep: true
			},
			// value(newVal, oldVal) {
			// 	this.detail._qty = newVal;
			// },
			profit(newVal, oldVal){
				if(newVal!=oldVal){
					if(newVal<0){
						// 盘亏
						if(this.detail.status == 't3_stock_in'){
							this.detail.status = 't2_stock_out';
							this.picker_index = 0;
							this.$emit("updata", this.detail);
						}
					}else{
						// 盘盈
						if(this.detail.status == 't2_stock_out'){
							this.detail.status = 't3_stock_in';
							this.picker_index = 0;
							this.$emit("updata", this.detail);
						}
					}
					this.set_picker_array();
				}
			}
		},
		created() {
			// console.log(this.table);
			this.init();

		},
		filters: {
			filterRatio(v) {
				if (!v) {
					return v;
				}
				let num = v * 100;
				return formatPrice(num) + '%'
			}
		},
		computed: {
			profit(){
				let main_qty = Number(this.detail.main_qty) || 0;
				let profit = main_qty - this.detail.stock_qty_before_taking;
				return profit;
			},
		},
		methods: {
			init() {
				this.set_picker_array();
				// this.value = this.detail._qty;
				let picker_index = this.picker_array.findIndex(v=>this.detail.status == v.id);
				// console.log(picker_index);
				if(picker_index<0){
					this.picker_index = 0;
				}else{
					this.picker_index = picker_index;
				}
				this.detail.status = this.picker_array[this.picker_index].id;
				this.$emit("updata", this.detail);
				this.picker_day_index = this.days.findIndex(v=>this.detail.stock_out_per_taking_cost_day == v.id);
			},
			set_picker_array(){
				// picker_array:[
				// 	{label:'出库',id:'t2_stock_out'},
				// 	{label:'入库',id:'t3_stock_in'},
				// ],
				let picker_array = [];
				if(this.profit<0){
					// 盘亏
					picker_array.push({label:'出库',id:'t2_stock_out'});
				}else{
					// 盘盈
					picker_array.push({label:'入库',id:'t3_stock_in'});
				}
				picker_array.push({label:'无',id:'t1_pending'});
				this.picker_array = picker_array;
			},
			bind_picker_day_change(e){
				let value = e.detail.value;
				this.picker_day_index = value;
				this.detail.stock_out_per_taking_cost_day = this.days[value].id;
				this.$emit("updata", this.detail);
			},
			bind_picker_change(e) {
				let value = e.detail.value;
				this.picker_index = value;
				this.detail.status = this.picker_array[value].id;
				this.$emit("updata", this.detail);
			},
			value_input(e) {
			
			},
			value_blur(e) {
				let name = e.target.dataset.name;
				if ((this.detail[name] + '') != '') {
					let num = Number(this.detail[name]);
					this.detail[name] = num;
					this.$emit("updata", this.detail);
				}
			},
			del(){
				this.$emit("del", this.detail);
			},
			save() {
			
			},
			value_change() {

			},
			price_change() {

			}
		}

	}
</script>

<style>
	.list-btn {
		background-color: #f5f5f5;
		padding: 6upx;
	}
</style>